<template>
  <div class="searchArea">
    <div style="margin:10px 0 10px 0">
      <h3 class="searchAreaAddCourseInfoTitle">新增课程信息</h3>
    </div>
    <el-form :inline="true" class="form" label-width="80px">
      <el-form-item label="课程名称">
        <el-input
          placeholder="请输入课程名称"
          size="small"
          v-model="courseInfo.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程类别">
        <el-select
          v-model="courseInfo.courseTypeName"
          placeholder="选择课程类别"
          size="small"
        >
          <el-option
            v-for="(item, index) in CourseType"
            :key="index"
            :label="item.courseTypeName"
            :value="item.courseTypeName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年份">
        <el-select
          v-model="courseInfo.year"
          placeholder="选择年份"
          size="small"
        >
          <el-option
            v-for="(item, index) in courseYear"
            :key="index"
            :label="item.label"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学期">
        <el-select
          v-model="courseInfo.term"
          placeholder="选择学期"
          size="small"
        >
          <el-option
            v-for="(item, index) in term"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-form :inline="true" class="form" label-width="80px">
      <el-form-item label="总学时">
        <el-input
          placeholder="请输入总学时"
          size="small"
          v-model="courseInfo.classHours"
        ></el-input>
      </el-form-item>
      <el-form-item label="总学分">
        <el-input
          placeholder="请输入总学分"
          size="small"
          v-model="courseInfo.credits"
        ></el-input>
      </el-form-item>
      <el-form-item label="开课学院">
        <el-select
          v-model="courseInfo.departmentName"
          placeholder="选择开课学院"
          size="small"
        >
          <el-option
            v-for="item in departmentList"
            :key="item.departmentId"
            :label="item.departmentName"
            :value="item.departmentName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程楼栋">
        <el-select
          v-model="building_temp"
          placeholder="选择楼栋"
          @change="hadnleChooseBuilding"
          size="small"
        >
          <el-option
            v-for="(item, index) in Building"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-form :inline="true" class="form" label-width="80px">
      <el-form-item label="课程教室">
        <el-select v-model="classroom_temp" placeholder="选择教室" size="small">
          <el-option
            v-for="(item, index) in Classroom"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上课时间">
        <el-cascader
          placeholder="选择上课时间"
          v-model="courseSection_temp"
          :options="allSetion"
          :props="props"
          size="small"
          collapse-tags
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          style="margin-left:80px;background-color: rgb(51, 55, 68);
                  color: white;
                  border: 0;"
          @click="submit"
          >提交新建课程</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseInfo: {
        title: null,
        courseTypeName: null,
        year: null,
        term: null,
        classHours: null,
        credits: null,
        departmentName: null,
        // teacherId: "222222222",
        // studentId: ["222222222245", "333333333333"],
        // sections: [
        //   {
        //     time: "星期一第五节",
        //     buildingId: "A1",
        //     roomNumber: "103",
        //   },
        //   {
        //     time: "星期一第六节",
        //     buildingId: "A1",
        //     roomNumber: "103",
        //   },
        // ],
      },
      // 临时存储
      building_temp: "",
      classroom_temp: "",
      courseSection_temp: [],

      //下拉框选项
      courseYear: [],
      term: ["上学期", "下学期"],
      CourseType: [],
      departmentList: [],
      Building: [],
      Classroom: [],

      //props 用于课程时间多级级联
      props: { multiple: true },
    };
  },
  computed: {
    // 计算属性，返回所有课程时间
    allSetion() {
      var week = ["星期一", "星期二", "星期三", "星期四", "星期五"];
      var sections = [
        "第一节",
        "第二节",
        "第三节",
        "第四节",
        "第五节",
        "第六节",
        "第七节",
        "第八节",
      ];
      var children = [];
      for (let index in sections) {
        children.push({ value: sections[index], label: sections[index] });
      }
      var options = [];
      for (let index in week) {
        options.push({
          value: week[index],
          label: week[index],
          children: children,
        });
      }
      return options;
    },
    sections() {
      var sections = [];
      for (let index in this.courseSection_temp) {
        sections.push({
          time:
            this.courseSection_temp[index][0] +
            this.courseSection_temp[index][1],
          buildingId: this.building_temp,
          roomNumber: this.classroom_temp,
        });
      }
      return sections;
    },
  },
  methods: {
    //触发提交
    submit() {
      let BaseInfo = this.courseInfo;
      BaseInfo.sections = this.sections;
      this.$emit("submitClick", BaseInfo);
    },
    //返回院系列表
    returnDepartment() {
      this.$http.get(this.$api.InfoDepartment).then((resp) => {
        if (resp.success) {
          this.departmentList = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回课程楼栋
    returBuilding() {
      this.$http.get(this.$api.InfoBuilding).then((resp) => {
        if (resp.success) {
          this.Building = resp.data.buildings;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    // 返回课程类型列表
    returCourseType() {
      this.$http.get(this.$api.InfoCourseType).then((resp) => {
        if (resp.success) {
          this.CourseType = resp.data.courseType;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回教室列表，@parames buildingId
    returClassroom(buildingId) {
      let options = { buildingId: buildingId };
      this.$http.post(this.$api.BuildingClassroom, options).then((resp) => {
        if (resp.success) {
          this.Classroom = resp.data.roomNumbers;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回课程年份
    returnCourseYear() {
      this.$http.get(this.$api.InfoYears).then((resp) => {
        if (resp.success) {
          this.courseYear = resp.data.years;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    // 级联，处理楼栋选择
    hadnleChooseBuilding(value) {
      this.returClassroom(value);
    },
  },
  mounted() {
    this.returnDepartment();
    this.returBuilding();
    this.returCourseType();
    this.returnCourseYear();
  },
};
</script>

<style scoped>
.searchAreaAddCourseInfoTitle {
  margin: 0;
}

.el-input {
  width: 210px;
}
.el-select {
  width: 210px;
}
.el-cascader {
  width: 210px;
}

.form {
  height: 45px;
  width: 1200px;
  margin: auto;
  text-align: left;
  padding-left: 0px;
}

.searchArea {
  text-align: center;
}
</style>
